<template>
  <view class="reject-page">
    <Navbar title="退回处理" />
    <view class="reject-content">
      <!-- 退回原因 -->
      <view class="input-section">
        <view class="section-title">退回原因</view>
        <view class="input-container">
          <textarea
            v-model="rejectReason"
            class="input-field"
            placeholder="请输入警告发生原因"
            maxlength="200"
            show-confirm-bar="false"
            auto-height
            :style="{ minHeight: '180rpx', maxHeight: '400rpx' }"
          />
          <view class="char-counter">{{ rejectReason.length }}/200</view>
        </view>
        <VoiceButton
          :currentValue="rejectReason"
          @update="handleReasonUpdate"
        />
        <image
          class="left-bottom"
          src="/static/img/left-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="right-bottom"
          src="/static/img/right-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="left-top"
          src="/static/img/left-top.png"
          mode="widthFix"
        ></image>
        <image
          class="right-top"
          src="/static/img/right-top.png"
          mode="widthFix"
        ></image>
      </view>

      <!-- 处理建议 -->
      <view class="input-section">
        <view class="section-title">处理建议</view>
        <view class="input-container">
          <textarea
            v-model="handleSuggestion"
            class="input-field"
            placeholder="请简述处理改良建议或意见"
            maxlength="200"
            show-confirm-bar="false"
            auto-height
            :style="{ minHeight: '180rpx', maxHeight: '400rpx' }"
          />
          <view class="char-counter">{{ handleSuggestion.length }}/200</view>
        </view>
        <VoiceButton
          :currentValue="handleSuggestion"
          @update="handleSuggestionUpdate"
        />
        <image
          class="left-bottom"
          src="/static/img/left-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="right-bottom"
          src="/static/img/right-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="left-top"
          src="/static/img/left-top.png"
          mode="widthFix"
        ></image>
        <image
          class="right-top"
          src="/static/img/right-top.png"
          mode="widthFix"
        ></image>
      </view>

      <!-- 底部按钮 -->
      <view class="action-buttons">
        <view class="action-button cancel-button" @click="handleCancel"
          >取消</view
        >
        <view class="action-button confirm-button" @click="handleConfirm"
          >确认</view
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import Navbar from '@/components/Navbar.vue';
import VoiceButton from '@/components/VoiceButton.vue';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { mygo } from '@/utils/useNavigator';
import { createRequest } from '@/utils/request';

const rejectReason = ref('');
const handleSuggestion = ref('');
const id = ref(''); // 接收传递的id参数

// 处理语音识别结果更新
const handleReasonUpdate = newValue => {
  rejectReason.value = newValue;
};

const handleSuggestionUpdate = newValue => {
  handleSuggestion.value = newValue;
};

// 接收页面参数
onLoad(options => {
  id.value = options.id || '';
  if (!id.value) {
    uni.showToast({ title: '参数缺失', icon: 'none' });
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
  }
});

// 取消
const handleCancel = () => {
  uni.navigateBack();
};

// 确认
const handleConfirm = async () => {
  if (!rejectReason.value.trim()) {
    uni.showToast({
      title: '请输入退回原因',
      icon: 'none',
    });
    return;
  }
  if (!handleSuggestion.value.trim()) {
    uni.showToast({
      title: '请输入处理建议',
      icon: 'none',
    });
    return;
  }
  try {
    const res = await createRequest('/alert/reject', {
      data: {
        alertProcessRecordId: id.value,
        returnReason: rejectReason.value,
        returnSuggestion: handleSuggestion.value,
      },
    });
    if (res.code === 200) {
      uni.reLaunch({
        url: '/pages/consolePages/consoleView',
      });
    }
  } catch (error) {
    uni.showToast({
      title: '退回失败，请重试',
      icon: 'none',
    });
  }
};
</script>

<style lang="scss" scoped>
.reject-page {
  @include page-with-header;
  background: #172869;
  min-height: 100vh;
}

.reject-content {
  padding: 24rpx;
}

.input-section {
  margin-bottom: 40rpx;
  border: 1rpx solid #50daff;
  position: relative;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #051749;
}

.left-bottom {
  position: absolute;
  left: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.right-bottom {
  position: absolute;
  right: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.left-top {
  position: absolute;
  left: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.right-top {
  position: absolute;
  right: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}

.section-title {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.input-container {
  position: relative;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.input-field {
  width: 100%;
  background: transparent;
  color: #fff;
  font-size: 28rpx;
  line-height: 1.6;
  border: none;
  outline: none;
  resize: none;
  overflow-y: auto;
}

.input-field::placeholder {
  color: #7ecbff;
}

.char-counter {
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
  font-size: 24rpx;
  color: #8b8b8b;
}

.action-buttons {
  position: fixed;
  bottom: 40rpx;
  left: 24rpx;
  right: 24rpx;
  display: flex;
  gap: 24rpx;
  z-index: 100;
}

.action-button {
  text-align: center;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  transition: all 0.3s ease;
  height: 88rpx;
}

.cancel-button {
  flex: 1;
  background: #112a5c;
  color: #fff;
  border: 1rpx solid #1ec8e1;
}

.cancel-button:active {
  transform: scale(0.98);
  opacity: 0.8;
}

.confirm-button {
  flex: 1.2;
  background: linear-gradient(135deg, #279bd5, #2264eb);
  color: #fff;
  box-shadow: 0 8rpx 24rpx rgba(30, 200, 225, 0.3);
}

.confirm-button:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 12rpx rgba(30, 200, 225, 0.3);
}
</style>
